import React from "react";
import { DoctorCard, MyNavBar } from "../../../components";
import { OperateSuccess } from "../../../components";
import style from "./style.module.scss";
import { useRequest } from "ahooks";
import { DoctorListParamsState, getDoctorList } from "../../../api/wallet";
import { useNavigate } from "react-router-dom";
// 查询问诊医生列表参数
const doctorListParams: DoctorListParamsState = {
  deptId: 2,
  condition: 2,
  sortBy: 4,
  page: 1,
  count: 5,
};
// 医生列表类型
export interface DoctorListRawState {
  doctorId: number;
  doctorName: string;
  imagePic: string;
  jobTitle: string;
  inauguralHospital: string;
  praise: string;
  serverNum: number;
  servicePrice: number;
  praiseNum: number;
  badNum: number;
}

interface PropsType {
  inauguralHospital: string;
  praise: string;
  serverNum: number;
}

const FooterText: React.FC<PropsType> = ({
  inauguralHospital,
  praise,
  serverNum,
}) => {
  const navigate = useNavigate();
  return (
    <div className={style.footerText}>
      <div className={style.hospital}>{inauguralHospital}</div>
      <div className={style.server}>
        <div>
          好评率 <span>{praise}</span>
        </div>
        <div>
          服务患者数 <span>{serverNum}</span>
        </div>
      </div>
      <button onClick={() => navigate("/consultation/chat")}>立即咨询</button>
    </div>
  );
};

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 医生列表请求hooks
  const { data: doctorList = [] } = useRequest(async () => {
    const resp = await getDoctorList(doctorListParams);
    return resp.result as DoctorListRawState[];
  });

  return (
    <div>
      <MyNavBar
        title="充值成功页"
        leftArrow={false}
        style={{ background: "#fff" }}
      ></MyNavBar>

      <OperateSuccess
        text={
          <div className={style["res-text"]}>
            <span>充值成功 , </span>
            <span
              className={style.link}
              onClick={() => navigate("/wallet/my", { replace: true })}
            >
              立即查看
            </span>
            !
          </div>
        }
      ></OperateSuccess>

      <div className={style.content}>
        <b className={style.title}>名医推荐</b>
        <div className={style.doctors}>
          {doctorList.map((item) => (
            <DoctorCard
              imagePic={item.imagePic}
              doctorName={item.doctorName}
              jobTitle={item.jobTitle}
              key={item.doctorId}
              footerText={
                <FooterText
                  inauguralHospital={item.inauguralHospital}
                  praise={item.praise}
                  serverNum={item.serverNum}
                ></FooterText>
              }
            ></DoctorCard>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Index;
